import { Container, Item, List, ListBox } from "./styled";
import { problemEnum } from "../../contains/problemEnum";
import { useNavigate } from "react-router-dom";
import Header from "../../componets/header";
import { inject, observer } from "mobx-react";
import { storeType } from "@/store";
import ExamMode from "./mode";

const Home = observer(({ store }: { store?: storeType }) => {
  const navigate = useNavigate();
  return (
    <Container>
      <ListBox>
        <Header />
        {store?.switchExam ? (
          <ExamMode />
        ) : (
          // <List>
          //   {problemEnum.map((item) => (
          //     <Item key={item} onClick={() => navigate("/list?type=" + item)}>
          //       {item}
          //     </Item>
          //   ))}
          // </List>
          <div>
            <div
              style={{
                width: "70%",
                height: "240px",
                fontSize: "25px",
                borderRadius: "5px",
                margin: "auto",
                marginTop: "60px",
                cursor: "pointer",
                background: "#6c5b7b",
                color: "#fff",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "10px",
              }}
              onClick={() => navigate("/list?type=forums")}
            >
              <div>论坛专区</div>
              <span>&gt;</span>
            </div>
            <div
              style={{
                width: "70%",
                padding: "10px",
                height: "240px",
                fontSize: "25px",
                margin: "auto",
                marginTop: "40px",
                borderRadius: "5px",
                cursor: "pointer",
                background: "#99b898",
                color: "#fff",
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
              }}
              onClick={() => navigate("/list?type=blog")}
            >
              <span>&lt;</span>
              <div> 博客专区</div>
            </div>
          </div>
        )}
      </ListBox>
    </Container>
  );
});

export default inject((store) => store)(Home);
